<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Application Insights Usage Analytics</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .question {
            margin-bottom: 20px;
        }
        .options {
            margin: 15px 0;
        }
        .option {
            margin: 10px 0;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        .option:hover {
            background-color: #f5f5f5;
        }
        .option.selected {
            background-color: #e1f5fe;
            border-color: #4fc3f7;
        }
        input[type="checkbox"] {
            margin-right: 10px;
        }
        button {
            padding: 10px 20px;
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #0056b3;
        }
        #answer {
            display: none;
            margin-top: 20px;
            padding: 15px;
            background-color: #f8f9fa;
            border-left: 4px solid #007bff;
        }
        .correct {
            color: #388e3c;
            font-weight: bold;
        }
        .explanation {
            margin-top: 15px;
        }
    </style>
</head>
<body>
    <div class="question">
        <h3>QUESTION NO: 136</h3>
        <p>You must implement Application Insights instrumentation capabilities utilizing the Azure Mobile Apps SDK to provide meaningful analysis of user interactions with a mobile app.</p>
        <p>You need to capture the data required to implement the Usage Analytics feature of Application Insights. Which three data values should you capture? Each correct answer presents part of the solution.</p>
        <p><em>NOTE: Each correct selection is worth one point.</em></p>
    </div>

    <div class="options">
        <label class="option">
            <input type="checkbox" name="answer" value="A">
            A. Trace
        </label>
        
        <label class="option">
            <input type="checkbox" name="answer" value="B">
            B. Session Id
        </label>
        
        <label class="option">
            <input type="checkbox" name="answer" value="C">
            C. Exception
        </label>
        
        <label class="option">
            <input type="checkbox" name="answer" value="D">
            D. User Id
        </label>
        
        <label class="option">
            <input type="checkbox" name="answer" value="E">
            E. Events
        </label>
    </div>

    <button onclick="showAnswer()">查看答案</button>
    
    <div id="answer">
        <p><strong>正确答案：</strong></p>
        <p class="correct">B. Session Id</p>
        <p class="correct">D. User Id</p>
        <p class="correct">E. Events</p>
        
        <div class="explanation">
            <p><strong>说明：</strong></p>
            <ul>
                <li><strong>Session Id (B)</strong>：用于追踪用户单次访问期间的所有活动，是分析用户行为的基础。</li>
                <li><strong>User Id (D)</strong>：识别特定用户，用于分析用户留存、回访等关键指标。</li>
                <li><strong>Events (E)</strong>：记录用户交互行为（如按钮点击、页面浏览），是Usage Analytics的核心数据。</li>
                <li><strong>排除选项</strong>：
                    <ul>
                        <li>Trace (A)：用于诊断日志，不属于用户行为分析数据</li>
                        <li>Exception (C)：用于错误监控，非Usage Analytics的组成部分</li>
                    </ul>
                </li>
            </ul>
            <p>Usage Analytics功能需要分析用户行为模式，因此必须捕获能够标识用户(B,D)和记录用户操作(E)的数据。根据Microsoft官方文档，这三项是Usage Analytics的标准维度。</p>
        </div>
    </div>

    <script>
        // Highlight selected options
        document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
            checkbox.addEventListener('change', function() {
                if (this.checked) {
                    this.parentElement.classList.add('selected');
                } else {
                    this.parentElement.classList.remove('selected');
                }
            });
        });

        function showAnswer() {
            document.getElementById('answer').style.display = 'block';
            // Select the correct answers
            document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
                if (['B', 'D', 'E'].includes(checkbox.value)) {
                    checkbox.checked = true;
                    checkbox.parentElement.classList.add('selected');
                }
            });
            // Scroll to answer
            document.getElementById('answer').scrollIntoView({ behavior: 'smooth' });
        }
    </script>
</body>
</html>
